<template>
  <div class="friend">
    <yg-background
      :imgStyle="{
        width: '100%',
        height: '368px',
        objectFit: 'cover',
      }"
      :imgSrc="require('@/assets/images/img_bg04.png')"
    >
      <template #default>
        <div class="yg_background_box">
          <div class="title">友链</div>
          <div class="content">我的好友</div>
        </div>
      </template>
    </yg-background>
    <main class="main_box container">
      <!-- 左侧边栏 -->
      <aside class="aside_left hidden-xs">
        <yg-usercard />
        <yg-recommend class="visible-sm" style="margin-top: 12px" />
        <yg-tags class="visible-sm" style="margin-top: 12px" />
      </aside>
      <!-- 内容 -->
      <section class="main_content">
        <div class="list_top">
          <div class="item_top">
            <div class="item_box" @click="isOpenModal = true">
              <div class="yg_img">
                <img
                  :src="require('@/assets/icons/icon_add_24@3x.png')"
                  alt=""
                />
              </div>
              <div class="content">申请友链</div>
            </div>
          </div>
        </div>
        <div class="list_box" v-for="item1 in newFriendList" :key="'list_box_item_'+item1?.type">
          <div class="divider">{{ item1?.type }}</div>
          <router-link
            class="item"
            v-for="item2 in item1?.list"
            :key="'item_' + item2?.id"
            to=""
          >
            <img :src="item2?.avatar" alt="" />
            <div class="content">
              {{ item2?.name }}
            </div>
          </router-link>
        </div>
      </section>
      <!-- 右侧边栏 -->
      <aside class="aside_right hidden-xs hidden-sm">
        <yg-recommend />
        <yg-tags style="margin-top: 12px" />
      </aside>
    </main>
    <yg-footer />
    <!-- 申请友链弹窗 -->
    <van-overlay
      :show="isOpenModal"
      style="background-color: rgba(0,0,0,0.48);"
      @click="isOpenModal = false"
      :z-index="999"
    >
      <div class="yg_modal">
        <div class="yg_modal_box" @click.stop="">
          <div class="yg_modal_header">
            <span class="title">申请友链</span>
            <img
              class="icon_close"
              :src="require('@/assets/icons/icon_close_20@3x.png')"
              alt=""
              @click.stop="isOpenModal = false"
            />
          </div>
          <div class="yg_modal_body">
            <div class="yg_modal_row">
              <span class="yg_modal_label">封面</span>
              <div class="yg_modal_uploader">
                <van-uploader
                  v-model="fileList"
                  :max-count="1"
                  :preview-options="{
                    closeable: true,
                    showIndex: false,
                  }"
                />
              </div>
            </div>
            <div class="yg_modal_row">
              <span class="yg_modal_label">标题</span>
              <div class="yg_modal_input">
                <yg-input
                  placeholder="填写标题~"
                  v-model="title"
                  maxlength="16"
                />
              </div>
            </div>
            <div class="yg_modal_row">
              <span class="yg_modal_label">描述</span>
              <div class="yg_modal_input">
                <yg-input
                  placeholder="填写描述~"
                  v-model="describe"
                  maxlength="30"
                />
              </div>
            </div>
            <div class="yg_modal_row">
              <span class="yg_modal_label">网址</span>
              <div class="yg_modal_input">
                <yg-input
                  placeholder="填写网址~"
                  v-model="website"
                />
              </div>
            </div>
          </div>
          <div class="yg_modal_footer">
            <div class="btn_submit">提交</div>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import avatar from "@/assets/images/img_touxiang.png";
export default {
  name: "Friend",
  components: {},
  data() {
    return {
      friendList: [
        {
          id: 1,
          type: 'B',
          name: "张三",
          motto: "孤独不是一种脾性,而是一种无奈。",
          avatar: avatar,
          link: "https://www.baidu.com",
        },
        {
          id: 2,
          type: 'A',
          name: "李四",
          motto: "愿意陪你长大的人已不多， 何况还要陪你变老。",
          avatar: avatar,
          link: "https://www.baidu.com",
        },
        {
          id: 3,
          type: 'A',
          name: "王五",
          motto: "世间治愈的是愿意自渡的人。",
          avatar: avatar,
          link: "https://www.baidu.com",
        },
        {
          id: 4,
          type: 'B',
          name: "赵六",
          motto: "你必须只有内心丰富，才能摆脱这些生活表面的相似。",
          avatar: avatar,
          link: "https://www.baidu.com",
        },
        {
          id: 5,
          type: 'B',
          name: "徐七",
          motto: "你必须只有内心丰富，才能摆脱这些生活表面的相似。",
          avatar: avatar,
          link: "https://www.baidu.com",
        },
        {
          id: 6,
          type: 'C',
          name: "胡八",
          motto: "你必须只有内心丰富，才能摆脱这些生活表面的相似。",
          avatar: avatar,
          link: "https://www.baidu.com",
        },
        {
          id: 7,
          type: 'C',
          name: "曾九",
          motto: "你必须只有内心丰富，才能摆脱这些生活表面的相似。",
          avatar: avatar,
          link: "https://www.baidu.com",
        },
        {
          id: 8,
          type: 'C',
          name: "朱十",
          motto: "你必须只有内心丰富，才能摆脱这些生活表面的相似。",
          avatar: avatar,
          link: "https://www.baidu.com",
        },
      ], // 友链列表
      isOpenModal: false, // 是否打开申请友链弹窗
      fileList: [], // 友链弹窗-上传封面
      title: '', // 友链弹窗-标题
      describe: '', // 友链弹窗-描述
      website: '', // 友链弹窗-网址
    };
  },
  watch: {
    isOpenModal(newValue) {
      if(!newValue) {
        // 关闭申请友链弹窗，初始化弹窗表单信息
        this.fileList = []
        this.title = ''
        this.describe = ''
        this.website = ''
      }
    },
    fileList() {
      console.log(this.fileList[0]);
    }
  },
  computed: {
    newFriendList() {
      const fromArr = Array.from(new Set(this.friendList.map(m=>m.type))).sort()
      let newArr = []
      for (let i = 0; i < fromArr.length; i++) {
        newArr[i] = { type:fromArr[i], list: [] }
        for (let j = 0; j < this.friendList?.length; j++) {
          if (fromArr[i] === this.friendList[j].type) {
            newArr[i].list.push(this.friendList[j])
          }
        }
      }
      // console.log(newArr)
      return newArr
    }
  },
};
</script>

<style lang="scss" scoped>
.friend {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f9f9f9;
  & > .main_box {
    flex: 1;
    display: flex;
    flex-direction: row;
    padding: 16px 0;
    min-width: 320px;
    & > .aside_left,
    & > .aside_right {
      display: flex;
      flex-direction: column;
      min-width: 220px;
      max-width: 220px;
    }
    & > .main_content {
      display: flex;
      flex-direction: column;
      margin: 0 12px;
      width: 100%;
      background-color: #fff;
      border-radius: 4px;
      overflow: hidden;
      & > .list_top {
        display: flex;
        flex-direction: column;
        & > .item_top {
          & > .item_box {
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 16px;
            user-select: none;
            cursor: pointer;
            & > .yg_img {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 48px;
              height: 48px;
              background-color: gold;
              border-radius: 4px;
              & > img {
                min-width: 36px;
                width: 36px;
                height: 36px;
              }
            }
            & > .content {
              flex: 1;
              display: flex;
              flex-direction: row;
              align-items: center;
              margin-left: 16px;
              min-height: 48px;
              border-bottom: 1px solid #eaeaea;
              font-size: 16px;
              font-weight: 400;
              color: #171717;
              line-height: 24px;
            }
          }
        }
      }
      & > .list_box {
        display: flex;
        flex-direction: column;
        & > .divider {
          display: flex;
          flex-direction: row;
          align-items: center;
          padding-left: 12px;
          width: 100%;
          height: 24px;
          background-color: #eaeaea;
          font-size: 12px;
          font-weight: 400;
          color: #999;
          line-height: 22px;
          user-select: none;
          cursor: default;
        }
        & > .item {
          display: flex;
          flex-direction: row;
          align-items: center;
          padding: 16px;
          &:hover {
            background-color: #fafafa;
          }
          & > img {
            min-width: 48px;
            width: 48px;
            height: 48px;
            border-radius: 4px;
          }
          & > .content {
            flex: 1;
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-left: 16px;
            min-height: 48px;
            border-bottom: 1px solid #eaeaea;
            font-size: 16px;
            font-weight: 400;
            color: #171717;
            line-height: 24px;
            user-select: none;
            cursor: pointer;
          }
        }
      }
      
    }
  }
}
.yg_modal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  &>.yg_modal_box {
    display: flex;
    flex-direction: column;
    padding: 24px;
    max-width: 500px;
    width: calc(100% - 64px);
    background-color: #fff;
    border-radius: 8px;
    &>.yg_modal_header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 10px;
      &>.title {
        font-size: 20px;
        font-weight: 500;
        color: #171717;
        line-height: 28px;
        user-select: none;
        cursor: default;
      }
      &>.icon_close {
        min-width: 24px;
        width: 24px;
        height: 24px;
        user-select: none;
        cursor: pointer;
      }
    }
    &>.yg_modal_body {
      flex: 1;
      display: flex;
      flex-direction: column;
      &>.yg_modal_row {
        display: flex;
        flex-direction: column;
        padding: 6px 0;
        &>.yg_modal_label {
          font-size: 16px;
          font-weight: 400;
          color: #333;
          line-height: 28px;
          user-select: none;
          cursor: default;
        }
        &>.yg_modal_uploader {
          display: flex;
          margin-top: 8px;
          padding: 0;
        }
        &>.yg_modal_input {
          flex: 1;
          display: flex;
          flex-direction: row;
          align-items: center;
          margin-top: 8px;
          padding: 8px 16px;
          border: 1px solid #ddd;
          border-radius: 4px;
        }
      }
    }
    &>.yg_modal_footer {
      padding-top: 20px;
      &>.btn_submit {
        padding: 8px;
        background-color: #ffd900;
        border-radius: 4px;
        font-size: 15px;
        font-weight: 400;
        color: #FFF;
        text-align: center;
        line-height: 27px;
        user-select: none;
        cursor: pointer;
        &:active {
          background-color: rgba(255, 217, 0, 0.8);
        }
      }
    }
  }
}
@media (max-width: 768px) {
  .main_box {
    margin: 0;
    padding: 0 !important;
    width: 100vw !important;
    & > .main_content {
      margin: 0 !important;
    }
  }
}
</style>
